<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
	var test = new Array();
	'<c:forEach begin="10" end="120" step="10" var="i">'
	obj = $
	{
		i
	};
	test.push(obj);
	'</c:forEach>'
	$(function() {
		$('#container')
				.highcharts(
						{
							credits : {
								enabled : false
							},
							chart : {
								type : 'line',
								marginRight : 130,
								marginBottom : 25
							},
							title : {
								text : 'Your Monthly Score',
								x : -20
							//center
							},
							xAxis : {
								categories : [ 'Jan', 'Feb', 'Mar', 'Apr',
										'May', 'Jun', 'Jul', 'Aug', 'Sep',
										'Oct', 'Nov', 'Dec' ]
							},
							yAxis : {
								title : {
									text : 'Your Improvement'
								},
								plotLines : [ {
									value : 0,
									width : 1,
									color : '#808080'
								} ]
							},

							legend : {
								layout : 'vertical',
								align : 'right',
								verticalAlign : 'top',
								x : 0,
								y : 100,
								borderWidth : 0
							},
							series : [ {
								name : 'Score',
								data : test
							} ]
						});
	});
</script>
<title>Insert title here</title>
</head>
<body>

	<div id="container"
		style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>